<script setup lang="ts">
import router from '@/router';

const dialogFormVisible8 = defineModel<boolean>('visible8');
const transactionId = defineModel<number>('transactionId')

const goToOrderPage = () => {
  router.push({ name: 'order', params: { transactionId: transactionId.value } });

};
</script>
<template>
  <el-dialog title="查看购买信息" v-model="dialogFormVisible8" width="50%">
    <p>点击下方链接查看购买信息：</p>
    <a href="#" @click.prevent="goToOrderPage">查看购买信息</a>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogFormVisible8 = false">取消</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<style>
.row-container {
  display: flex;
  flex-wrap: wrap;
  gap: 10px; /* 间距 */
}

.row {
  display: flex;
  align-items: center;
  flex: 1 0 45%; /* 每个 row 占据 45% 的宽度，留出一些间距 */
  min-width: 200px; /* 最小宽度，防止内容过窄 */
  margin-bottom: 10px;
}

.label {
  box-sizing: border-box;
  width: 100px;
  text-align: right;
  padding-right: 12px;
}

.content {
  flex: 1;
}
.avatar-uploader {
  width: 10%;
}

.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
</style>
<style scoped>
.avatar-uploader .avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>

<style>
.avatar-uploader .el-upload {
  border: 1px dashed var(--el-border-color);
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
  border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  text-align: center;
}
</style>
